<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='BUI'>/**
</span> * @fileOverview 边框布局选项
 * @ignore
 */

var BUI = require(&#39;bui-common&#39;),
	Base = require(&#39;./base&#39;),
	CLS_COLLAPSED = &#39;x-collapsed&#39;,
	REGINS = {
		NORTH : &#39;north&#39;,
		EAST : &#39;east&#39;,
		SOUTH : &#39;south&#39;,
		WEST : &#39;west&#39;,
		CENTER : &#39;center&#39;
	};
	

<span id='BUI-Layout-Item-Border'>/**
</span> * 边框布局选项
 * @class BUI.Layout.Item.Border
 * @extends BUI.Layout.Item
 */
var Border = function(config){
	Border.superclass.constructor.call(this,config);
};

Border.ATTRS = {

<span id='BUI-Layout-Item-Border-cfg-region'>	/**
</span>	 * 位置
	 *&lt;ol&gt;
   * &lt;li&gt;fit: &#39;none&#39;, 内部控件不跟随布局项的宽高自适应&lt;/li&gt;
   * &lt;li&gt;fit: &#39;width&#39;,内部控件跟随布局项的宽度进行自适应&lt;/li&gt;
   * &lt;li&gt;fit: &#39;height&#39;,内部控件跟随布局项的高度进行自适应&lt;/li&gt;
   * &lt;li&gt;fit: &#39;both&#39;,内部控件跟随布局项的宽度、高度都进行自适应&lt;/li&gt;
   *&lt;/ol&gt;
	 * @cfg {String} region
	 */
	region : {

	},
<span id='BUI-Layout-Item-Border-cfg-titleTpl'>	/**
</span>	 * 标题的模板
	 * &lt;pre&gt;&lt;code&gt;
	 * 	children : [{
				layout : {
					title : &#39;north&#39;,
					region : &#39;north&#39;,
					height : 50,
					titleTpl : &#39;&amp;lt;div class=&quot;x-border-title x-border-title-{region}&quot;&gt;{title}&amp;lt;/div&gt;&#39;
				},
				width : 100,
				height :15,
				elCls : &#39;red&#39;,
				xclass : &#39;grid&#39;,
				content : &quot;无自适应&quot;
			}]
	 * &lt;/code&gt;&lt;/pre&gt;
	 * @cfg {Object} titleTpl
	 */
	titleTpl : {
		value : &#39;&lt;div class=&quot;x-border-title x-border-title-{region}&quot;&gt;{title}&lt;/div&gt;&#39;
	},
<span id='BUI-Layout-Item-Border-cfg-collapseTpl'>	/**
</span>	 * 收缩展开的dom的模板
	 * &lt;pre&gt;&lt;code&gt;
	 * 	children : [{
				layout : {
					title : &#39;north&#39;,
					region : &#39;north&#39;,
					height : 50,
					collapsable : true,//只有callapsable:true，collapseTpl才会生效
					collapseTpl : &#39;&amp;lt;s class=&quot;x-collapsed-btn x-collapsed-{region}&quot;&gt;&amp;lt;/s&gt;&#39;
				},
				width : 100,
				height :15,
				elCls : &#39;red&#39;,
				xclass : &#39;grid&#39;,
				content : &quot;无自适应&quot;
			}]
	 * &lt;/code&gt;&lt;/pre&gt;
	 * @cfg {Object} collapseTpl
	 */
	collapseTpl : {
		value : &#39;&lt;s class=&quot;x-collapsed-btn x-collapsed-{region}&quot;&gt;&lt;/s&gt;&#39;
	},
<span id='BUI-Layout-Item-Border-cfg-collapsable'>	/**
</span>	 * 是否可以折叠
	 *  &lt;pre&gt;&lt;code&gt;
	 * 	children : [{
				layout : {
					title : &#39;north&#39;,
					region : &#39;north&#39;,
					height : 50,
					collapsable : true
				},
				width : 100,
				height :15,
				elCls : &#39;red&#39;,
				xclass : &#39;grid&#39;,
				content : &quot;无自适应&quot;
			}]
	 * &lt;/code&gt;&lt;/pre&gt;
	 * @cfg {Boolean} collapsable
	 */
	collapsable : {
		value : false
	},
<span id='BUI-Layout-Item-Border-cfg-collapsed'>	/**
</span>	 * 是否默认折叠
	 * @cfg {Boolean} collapsed
	 */
<span id='BUI-Layout-Item-Border-property-collapsed'>	/**
</span>	 * 是否折叠
	 * @type {Boolean}
	 */
	collapsed : {
		value : false
	},
<span id='BUI-Layout-Item-Border-cfg-leftRange'>	/**
</span>	 * 收缩后剩余的宽度或者高度，如果存在title，则以title的高度为准
	 * @cfg {Number} leftRange
	 */
	leftRange : {
		value : 28
	},
<span id='BUI-Layout-Item-Border-property-tplProperties'>	/**
</span>	 * 附加模板
	 * @type {Object}
	 */
	tplProperties : {
		value : [
			{name : &#39;title&#39;,value : &#39;titleTpl&#39;,prev : true},
			{name : &#39;collapsable&#39;,value : &#39;collapseTpl&#39;,prev : true}
		]
	},
	statusProperties : {
		value : [&#39;collapsed&#39;]
	}
};

Border.REGINS = REGINS;

BUI.extend(Border,Base);

BUI.augment(Border,{
<span id='BUI-Layout-Item-Border-method-syncElements'>	/**
</span>	 * 根据属性附加一些元素
	 * @protected
	 */
	syncElements : function(el,attrs){
		Border.superclass.syncElements.call(this,el,attrs);
		var _self = this,
			el = _self.get(&#39;el&#39;),
			property = _self.getCollapseProperty();
		if(_self.get(&#39;collapsed&#39;) &amp;&amp; _self.get(property) == el[property]()){
			_self.collapse(0);
		}
	},
<span id='BUI-Layout-Item-Border-method-expand'>	/**
</span>	 * 展开
	 * &lt;pre&gt;
	 * &lt;code&gt;
	 * var item = layout.getItemsByRegion(&#39;west&#39;)[0];
	 * item &amp;&amp; item.expand()
	 * &lt;/code&gt;
	 * &lt;/pre&gt;
	 */
	expand : function(range,duration,callback){
		var _self = this,
			property = _self.getCollapseProperty(),
			el = _self.get(&#39;el&#39;),
			toRange = _self.get(property),
			css = {};
		css[property] = toRange;

		el.animate(css,duration,function(){
			_self.set(&#39;collapsed&#39;,false);
			el.removeClass(CLS_COLLAPSED);
			callback &amp;&amp; callback();
		});
	},
	//获取折叠的属性，width,length
	getCollapseProperty : function(){
		var _self = this,
			region = _self.get(&#39;region&#39;);
		if(region == REGINS.SOUTH || region == REGINS.NORTH){
			return &#39;height&#39;;
		}
		return &#39;width&#39;;
	},
	//获取剩余的宽度或者高度
	_getLeftRange : function(){
		var _self = this,
			el = _self.get(&#39;el&#39;),
			left = _self.get(&#39;leftRange&#39;);
		return left;
	},
<span id='global-method-getCollapsedRange'>	/**
</span>	 * @protected
	 * @ignore
	 */
	getCollapsedRange : function(){
		var _self = this,
			property = _self.getCollapseProperty(),
			el = _self.get(&#39;el&#39;),
			val = _self.get(property);
		if(BUI.isString(val)){
			var dynacAttrs = _self._getDynacAttrs();
			if(val.indexOf(&#39;{&#39;) != -1){
				val = BUI.substitute(val,dynacAttrs);
				val = BUI.JSON.looseParse(val);
			}
			else if(val.indexOf(&#39;%&#39;) != -1){
				val = parseInt(val,10) * 0.01 * dynacAttrs[property];
			}else{
				val = parseInt(val,10);
			}
		}
		return val - _self._getLeftRange(property);
	},
<span id='BUI-Layout-Item-Border-method-collapse'>	/**
</span>	 * 折叠
	 * &lt;pre&gt;
	 * &lt;code&gt;
	 * var item = layout.getItemsByRegion(&#39;west&#39;)[0];
	 * item &amp;&amp; layout.collapseItem(item);
	 * &lt;/code&gt;&lt;/pre&gt;
	 */
	collapse : function(duration,callback){
		var _self = this,
			property = _self.getCollapseProperty(),
			el = _self.get(&#39;el&#39;),
			left = _self._getLeftRange(property),
			css = {};
		css[property] = left;
		el.animate(css,duration,function(){
			_self.set(&#39;collapsed&#39;,true);
			el.addClass(CLS_COLLAPSED);
		  if(callback){
		  	callback();
		  }
		});
	}
});



module.exports = Border;
</pre>
</body>
</html>
